<template>
  <div class="ml-2 flex-1">
    <div>
      <a-card :bordered="false" style="height: 830px; width: 1380px">
        <a-form layout="inline" ref="formRef">
          <a-form-item label="申请时间">
            <a-range-picker v-model:value="time" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch">
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" style="margin-left: 10px" :icon="h(ReloadOutlined)" @click="onReset">
              重置
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleCreate">按选择生成预收款账户</a-button>
          </a-form-item>
        </a-form>
        <a-table :columns="columns" :data-source="dataSource" bordered :pagination="pagination" class="mt-5"
          :row-class-name="(_record: any, index: number) =>
              index % 2 === 1 ? 'table-striped' : null
            " :scroll="{ x: 4000, y: 550 }" :row-selection="{
            selectedRowKeys: RowKeys,
            onChange: onSelectChange,
            getCheckboxProps: (record: any) => ({
              disabled: record.yskzhbh !== null && record.yskzhbh !== '',
            }),
          }" rowKey="areaID">
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'active'">
              <a-popconfirm title="确认删除吗？" placement="bottom" ok-text="是" cancel-text="否" @confirm="confirm(record)">
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, h } from "vue";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue";
import { getPreAccountApi, createPreAccountApi, delPreAccountApi } from "#/api/core/charge";
import { message } from "ant-design-vue";
import dayjs from "dayjs";

const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const time = ref("");
const formRef = ref(null);
const RowKeys = ref([]);
const columns = [
  { title: "公司名称", dataIndex: "comName", key: "comName", align: "center" },
  { title: "小区名称", dataIndex: "village", key: "village", align: "center" },
  {
    title: "住址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
  },
  {
    title: "住户编号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
  },
  { title: "住户姓名", dataIndex: "holder", key: "holder", align: "center" },
  {
    title: "用户电话",
    dataIndex: "holdPhone",
    key: "holdPhone",
    align: "center",
  },
  {
    title: "面积名称",
    dataIndex: "areaName",
    key: "areaName",
    align: "center",
  },
  {
    title: "预收款账户编号",
    dataIndex: "yskzhbh",
    key: "yskzhbh",
    align: "center",
  },
  { title: "总充值金额", dataIndex: "zczje", key: "zczje", align: "center" },
  { title: "总扣减金额", dataIndex: "zkjje", key: "zkjje", align: "center" },
  { title: "账户余额", dataIndex: "zhye", key: "zhye", align: "center" },
  { title: "归属人", dataIndex: "gsr", key: "gsr", align: "center" },
  { title: "联系电话", dataIndex: "lxdh", key: "lxdh", align: "center" },
  { title: "使用状态", dataIndex: "syzt", key: "syzt", align: "center" },
  { title: "开户时间", dataIndex: "khsj", key: "khsj", align: "center" },
  { title: "销户时间", dataIndex: "xhsj", key: "xhsj", align: "center" },
  { title: "面积id", dataIndex: "areaID", key: "areaID", align: "center" },

  {
    title: "房屋名称",
    dataIndex: "houseName",
    key: "houseName",
    align: "center",
  },
  {
    title: "充值金额",
    dataIndex: "totalAmount",
    key: "totalAmount",
    align: "center",
  },
  { title: "余额", dataIndex: "balance", key: "balance", align: "center" },
  {
    title: "总充值金额",
    dataIndex: "ztotalAmount",
    key: "ztotalAmount",
    align: "center",
  },
  { title: "总余额", dataIndex: "zbalance", key: "zbalance", align: "center" },
  {
    title: "扣减传的参数",
    dataIndex: "deduction",
    key: "deduction",
    align: "center",
  },
  {
    title: "扣减传的参数",
    dataIndex: "zdeduction",
    key: "zdeduction",
    align: "center",
  },
  { title: "变动类型", dataIndex: "bdlx", key: "bdlx", align: "center" },
  { title: "操作人", dataIndex: "czr", key: "czr", align: "center" },
  {
    title: "接收人",
    dataIndex: "recipient",
    key: "recipient",
    align: "center",
  },
  { title: "备注", dataIndex: "notes", key: "notes", align: "center" },
  { title: "类型", dataIndex: "type", key: "type", align: "center" }, // type: 1充值, title can be '类型'
  { title: "变动金额", dataIndex: "bdje", key: "bdje", align: "center" },
  {
    title: "操作",
    dataIndex: "active",
    key: "active",
    align: "center",
    fixed: "right",
  },
];
const dataSource = ref([]);
const onSelectChange = (selectedRowKeys: any) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  RowKeys.value = selectedRowKeys;
};
const onSearch = () => {
  if (!props.selectedNodeId || props.selectedNodeId.length === 0) {
    message.error("请选择左侧树结构！");
    return;
  } else {
    const query = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      time: time.value
        ? dayjs(time.value[0]).format("YYYY-MM-DD") +
        "," +
        dayjs(time.value[1]).format("YYYY-MM-D")
        : "",
      treeData: props.selectedNodeId,
    };
    getPreAccountApi(query).then((res: any) => {
      console.log(res);
      pagination.total = res.total;
      dataSource.value = res.data;
      RowKeys.value = [];
    });
  }

};
const onReset = () => {
  formRef.value.validate();
};
const handleCreate = () => {
  console.log(RowKeys.value);
  if (RowKeys.value.length === 0) {
    message.error("请选择一行");
    return;
  } else {
    createPreAccountApi(RowKeys.value.join(',')).then((res: any) => {
      // console.log(res);
      if (res.data.code === 200) {
        message.success('生成成功');
        onSearch();
      } else {
        message.error('生成失败');
      }
    });
  }
};
const confirm = (record: any) => {
  delPreAccountApi(record.areaID).then((res: any) => {
    console.log(res)
    if (res.data.code == 200) {
      message.success('删除成功');
      onSearch();
    } else {
      message.error('删除失败');
    }
  })
}
</script>
<style scoped></style>
